<template>
  <div class="product-catlog">
    <div v-for="(unit, index) in catlogs" :key="unit.id" class="unit-item">
      <div class="unit-content">
        <img src alt />
        <span class="unit-title">{{ `${index + 1} | ${unit.title}` }}</span>
        <van-tag v-show="unit.free" plain color="#FF7002" class="unit-tag">试看</van-tag>
        <span class="video-length">{{ unit.length }}</span>
      </div>

      <template v-if="unit.children && unit.children.length > 0">
        <div v-for="(capter, _index) in unit.children" :key="capter.id" class="capter-item">
          <span class="capter-no">{{ `章节${_index + 1}` }}</span>
          <span class="capter-title">{{ capter.title }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tag } from 'vant'

Vue.use(Tag)

const courseStatus = {
  done: '已完成'
}

export default {
  data() {
    return {
      catlogs: []
    }
  },

  mounted() {
    this.fetch()
  },

  methods: {
    fetch() {
      this.catlogs = [
        {
          id: '0',
          title: '数据分析行业全景解析',
          free: true,
          length: '12:33',
          status: 'done',
          children: [
            {
              id: '0-0',
              title: '数据分析行业全景解析',
              free: true,
              length: '04:55',
              status: 'done'
            },
            {
              id: '0-1',
              title: '数据分析行业全景解析',
              free: true,
              length: '04:55',
              status: 'done'
            }
          ]
        },
        {
          id: '1',
          title: '数据分析行业全景解析',
          length: '12:33',
          status: 'done',
          children: [
            {
              id: '1-0',
              title: '数据分析行业全景解析',
              free: true,
              length: '04:55',
              status: 'done'
            },
            {
              id: '1-1',
              title: '数据分析行业全景解析',
              free: true,
              length: '04:55',
              status: 'done'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.product-catlog {
  padding: 30px 17px;
  padding-top: 0;

  .unit-item {
    color: #999999;
    font-size: 14px;
    margin-top: 30px;

    .unit-content {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      position: relative;

      img {
        width: 14px;
        height: 14px;
        margin-right: 7px;
      }

      .unit-title {
        margin-right: 10px;
      }

      .unit-tag {
        background-color: rgba(0, 0, 0, 0);
      }

      .video-length {
        position: absolute;
        right: 0;
      }
    }

    .capter-item {
      margin: 5px 0;
      margin-left: 21px;
      margin-right: 8px;
      background-color: #f3f3f3;
      padding: 4.5px 10px;
    }
  }
}
</style>
